<template>
	<div>
		<el-card>
			<el-table :data="tableData" stripe border style="width: 100%">
				<el-table-column prop="classroom.code" label="教室编号">
				</el-table-column>
				<el-table-column prop="classroom.type" label="教室种类">
				</el-table-column>
				<el-table-column prop="classroom.size" label="教室规格">
				</el-table-column>
				<el-table-column prop="user.name" label="申请人">
					<template scope="scope">
						<div class="sub-body" @click="showUser(scope.row.user.name)">{{ scope.row.user.name }}</div>
					</template>
				</el-table-column>
				<el-table-column prop="createtime" label="申请日期">
				</el-table-column>
				<el-table-column prop="date" label="使用日期">
				</el-table-column>
				<el-table-column prop="reason" label="申请原因">
				</el-table-column>
				<el-table-column label="申请使用时间段" prop="classroom.apply">
					<template slot-scope="scope">
						<div v-for="(item, index) in tableData[scope.$index].classroom.apply" :key="index">
							<p>{{ item }}</p>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="ps" label="备注" v-if="flag">
				</el-table-column>
				<el-table-column prop="user2.name" label="处理人" v-if="flag">
				</el-table-column>
				
				<el-table-column prop="handletime" label="处理时间" v-if="flag">
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="100" v-if="!flag">
					<template slot-scope="scope" v-if="!flag">
						<el-button @click="handleClick(scope.row)" type="text" size="small" :disabled="flag1">同意
						</el-button>
						<el-button @click="handleClick1(scope.row)" type="text" size="small" :disabled="flag1">拒绝
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			
			<el-dialog title="驳回信息" :visible.sync="dialogC" :append-to-body="true">
				<el-form :model="form">
					<el-form-item>
						<el-input v-model="form.no" autocomplete="off" placeholder="请输入驳回原因"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogC = false">取 消</el-button>
					<el-button type="primary" @click="ok1()">确 定</el-button>
				</div>
			</el-dialog>


			<!--分页-->
			<el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="size"
				layout="total, prev, pager, next" :total="total">
			</el-pagination>
			<el-switch v-model="value" active-text="未处理" inactive-text="已处理" @change="mySwitch()">
			</el-switch>
			
			
			<el-dialog title="申请人详细信息" :visible.sync="dialogUser" :append-to-body="true">
				<el-table :data="applyUser" stripe border style="width: 100%">
					<el-table-column prop="code" label="编号">
					</el-table-column>
					<el-table-column prop="name" label="姓名">
					</el-table-column>
					<el-table-column prop="sex" label="性别">
					</el-table-column>
					<el-table-column prop="identity" label="身份">
					</el-table-column>
					<el-table-column prop="college" label="学院">
					</el-table-column>
					<el-table-column prop="category" label="专业">
					</el-table-column>
					<el-table-column prop="uclass" label="班级">
					</el-table-column>
				</el-table>
				<!-- <div slot="footer" class="dialog-footer">
					<el-button type="primary" @click="ok()">确 定</el-button>
				</div> -->
			</el-dialog>

		</el-card>
	</div>
</template>

<script>
	import {
		getAsk,
		updateAsk,
		notice,
		getUser,
	} from '../../api/system.js'

	import {
		getUserInfo
	} from '../../api/system.js'
	export default {
		data() {
			return {
				tableData: [],
				size: 7,
				currentPage: 1,
				total: 0,
				user: {},
				value: true,
				flag: false,
				flag1:false,
				dialogUser:false,
				applyUser:[],
				form:{
					row:undefined,
					no:'',
				},
				dialogC:false,
			}
		},
		methods: {
			getAsks(current) {
				getAsk(undefined, current, this.size, this.value).then(res => {
					this.flag = !this.value;
					this.flag1 = (!this.value) && res.data1[0].cancel;
					this.tableData = res.data1;
					this.total = res.data2;
				})

			},
			handleCurrentChange(val) {
				this.getAsks(val);
			},
			getUid() {
				getUserInfo().then(res => {
					this.user = res.data1;
				})
			},
			handleClick(row) {
				console.log(row);
				updateAsk(row.id, this.user.id,row.classroom.id,row.classroom.time1,row.classroom.time2,row.classroom.time3,row.classroom.time4,row.classroom.time5,row.classroom.time6).then(res => {
					if (res.isok) {
						notice(this.user.name, row.createtime, row.email, "成功").then(res => {
							console.log(res);
							this.getAsks(this.currentPage);
						})
					}
				})
			},
			handleClick1(row) {
				this.form.row =row;
				this.dialogC = true;
				

			},
			mySwitch() {
				this.getAsks(this.currentPage);
			},
			showUser(val){
				getUser(val).then(res=>{
					if("0"==res.data1[0].identity){
						res.data1[0].identity = '学生';
					}else if("1"==res.data1[0].identity){
						res.data1[0].identity = '教师';
					}else{
						res.data1[0].identity = '管理员';
					}
					this.applyUser = res.data1;
					console.log(this.applyUser)
					console.log(res.data1)
					
				})
				this.dialogUser = true;
				
			},
			ok(){
				this.dialogUser = false;
			},
			ok1(){
				updateAsk(this.form.row.id, this.user.id).then(res => {
					if (res.isok) {
						notice(this.user.name, this.form.row.createtime, this.form.row.email, "驳回，原因为："+this.form.no).then(res => {
							this.form.row = undefined;
							this.form.no = '';
							this.dialogC = false;
							this.getAsks(this.currentPage);
						})
					}
				})
			}
		},
		created() {
			this.getUid();
			this.getAsks(this.currentPage);
		}
	}
</script>

<style>
	.el-pagination {
		float: left;
	}

	.el-switch {
		float: right;
		position: relative;
		bottom: -6px;
	}
</style>
